function YujingModal(){
    this.createDom();
	this.addListener();
}

YujingModal.template=`<!-- 分类页面 -->
<div style="border:1px solid #e5e5e5; margin-left:350px;margin-top:100px;" class="hide" id="box4">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" style="margin-left: 100px; margin-top: 20px;">
    <li role="presentation" class="active"><a href="#xa" aria-controls="xa" role="tab" data-toggle="tab">预警管理</a></li>
    <li role="presentation"><a href="#xb" aria-controls="xb" role="tab" data-toggle="tab">添加预警</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="xa">
      <table class="table table-bordered .active">
          <tr class="active">
              <td>编号</td>
              <td>商品名称</td>
              <td>商品分类</td>
              <td>备注</td>
              <td>预警数量</td>
              <td>编辑</td>
              <td>删除</td>
          </tr>
        </table>
    </div>
    <div role="tabpanel" class="tab-pane" id="xb">

      <form class="form-horizontal" style="margin-top: 30px;">
          <div class="form-group">
          <label for="ku" class="col-sm-2 control-label">分类</label>
          <div class="col-sm-10">
            <select style="width:443px;">
                <option>请选择分类</option>
                <option>肉类</option>
                <option>蔬果</option>

            </select>
          </div>
        </div>

        <div class="form-group">
        <label for="xc" class="col-sm-2 control-label">商品名称</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="xc" style="width:443px;" placeholder="商品名称">
        </div>
      </div>

      <div class="form-group">
            <label for="xd" class="col-sm-2 control-label">数量</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="xd" style="width:443px;" placeholder="数量">
            </div>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">备注</label>
            <div class="col-sm-10">
             <textarea name="xe" id="xe" cols="60" rows="10"></textarea>
            </div>
          </div>
          <div class="form-group" >
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default" style="background: #438EB9; color: white;">添加分类</button>
            </div>
          </div>
        </form>
    </div>
    
  </div>

</div>`;

$.extend(YujingModal.prototype, {
	// 创建DOM元素并渲染
	createDom() {
		$(YujingModal.template).appendTo("body");
	},
	// 注册事件监听
	addListener() {
		
        $("#yujing").on("click", this.yujingHandler);
        // $('#myTabs a').click(function (e) {
        //     e.preventDefault()
        //     $(this).tab('show')
        //   });
        //   $('#myTabs a[href="#profile"]').tab('show') ;// Select tab by name
        //   $('#myTabs a:first').tab('show'); // Select first tab
	},
	// 登录业务处理
	yujingHandler() {
        
        $("#box4").removeClass("hide");
        $("#box1").hide();
        $("#box4").show();
        $("#box3").hide();
        $("#box2").hide();
        $("#box5").hide();
        $("#box6").hide();
        $("#box7").hide();
	}
}); 

new YujingModal();